<template>
  <el-row style="padding-top: 20px">
    <el-col :span="16" :offset="3">
      <el-form label-width="140px" size="large">
        <el-form-item label="邮件标题">
          <el-input v-model="selectedMailConf.mailTitle" />
        </el-form-item>
        <el-form-item label="发件人昵称" size="large">
          <el-input v-model="selectedMailConf.senderNickname" />
        </el-form-item>

        <el-form-item label="发送执行结果" size="large">
          <el-cascader
            :options="projectResultsList"
            v-model="cascaderValues"
            clearable
            filterable
            :props="{ expandTrigger: 'hover' }"
          >
          </el-cascader>
        </el-form-item>

        <el-form-item label="公司名" size="large">
          <el-input v-model="selectedMailConf.companyName" size="large" />
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>
  <el-row>
    <el-col :offset="12" :span="7" align="right">
      <el-button type="success" @click="previousStep">上一步</el-button>
      <el-button type="primary" @click="nextStep">下一步</el-button>
    </el-col>
  </el-row>
</template>

<script lang="ts" setup>
import { ref, onMounted } from "vue";
import { storeToRefs } from "pinia";
import { useMailConfStore } from "@/stores/mailConfStore";
import { listProjectsApi } from "@/api/sunnyproject";
import { listResultInProjectApi } from "@/api/sunnyresult";
const mailConfStore = useMailConfStore();
const { nowStep, selectedMailConf, cascaderValues } =
  storeToRefs(mailConfStore);

const nextStep = () => {
  nowStep.value++;
};

const previousStep = () => {
  nowStep.value--;
};

const projectResultsList = ref<cascaderType[]>([]);

interface cascaderType {
  label: string;
  value?: number;
  children?: cascaderType[];
}

onMounted(() => {
  listCascaderDatas();
});

function listCascaderDatas() {
  listProjectsApi().then(({ data }) => {
    data.forEach((project) => {
      //获取所有项目信息，每一个项目创建一个cascader
      let projectResult: cascaderType = {
        value: project.id,
        label: project.name,
        children: [],
      };
      console.log("现在正在遍历的项目是", projectResult);
      listResultInProjectApi(project.id).then(({ data }) => {
        data.forEach((sunnyResult) => {
          //获取项目中的result信息，存储到项目的children中
          let resultInfo: cascaderType = {
            value: sunnyResult.id,
            label: "#" + sunnyResult.buildOrder + "次",
            children: [],
          };
          projectResult.children!.push(resultInfo);
        });
        if (projectResult.children!.length > 0) {
          projectResultsList.value.push(projectResult);
        }
      });

      console.log("遍历完成之后的项目是", projectResult);
    });
    console.log("遍历完成之后的所有的结果是", projectResultsList.value);
  });
}
</script>

<style scoped>
:deep(.el-form-item__label) {
  font-size: 16px;
}
</style>
